<!DOCTYPE html>
<html lang="zh-cn">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="media/layui/css/layui.css" media="all">
<link rel="stylesheet" href="media/css/font-awesome.min.css" media="all">

<style>
.info-box {
	height: 85px;
	background-color: white;
	background-color: #ecf0f5;
}

.info-box .info-box-icon {
	border-top-left-radius: 2px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 2px;
	display: block;
	float: left;
	height: 85px;
	width: 85px;
	text-align: center;
	font-size: 45px;
	line-height: 85px;
	background: rgba(0, 0, 0, 0.2);
}

.info-box .info-box-content {
	padding: 5px 10px;
	margin-left: 85px;
}

.info-box .info-box-content .info-box-text {
	display: block;
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: uppercase;
}

.info-box .info-box-content .info-box-number {
	display: block;
	font-weight: bold;
	font-size: 18px;
}
.major {
	font-weight: 10px;
	color: #01AAED;
}
.main {
	margin-top: 25px;
}

.main .layui-row {
	margin: 10px 0;
}
</style>
</head>

<body>
	<div class="layui-fluid main">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md3">
				<div class="info-box">
					<span class="info-box-icon"
						style="background-color: #00c0ef !important; color: white;">
						<i class="fa fa-child" ></i></span>
					<div class="info-box-content">在线人数<span
							class="info-box-number" id="s1">1314520</span>
					</div>
				</div>
			</div>
			
			<div class="layui-col-md3">
				<div class="info-box">
					<span class="info-box-icon"
						style="background-color: #00a65a !important; color: white;"><i
						class="fa fa-users" aria-hidden="true"></i></span>
					<div class="info-box-content">
						<span class="info-box-text">员工人数</span> <span
							class="info-box-number" id="s2">65</span>
					</div>
				</div>
			</div>
			<div class="layui-col-md3">
				<div class="info-box">
					<span class="info-box-icon"
						style="background-color: #f39c12 !important; color: white;"><i
						class="fa fa-users" aria-hidden="true"></i></span>
					<div class="info-box-content">
						<span class="info-box-text">在读班级</span> <span
							class="info-box-number" id="s3">85</span>
					</div>
				</div>
			</div>
			<div class="layui-col-md3">
				<div class="info-box">
					<span class="info-box-icon"
						style="background-color: #dd4b39 !important; color: white;"><i
						class="fa fa-graduation-cap" aria-hidden="true"></i></span>
					<div class="info-box-content">
						<span class="info-box-text">学员人数</span>
						<span
							class="info-box-number" id="s4">85</span>
					</div>
				</div>
			</div>
		</div>
		<div class="layui-row">
			<div class="layui-col-md12" style="text-align: center">
				<h2>你的足迹</h2>
			</div>
		</div>
		<div>
			<table class="layui-table" id="tbdata">
			  <thead>
			  <tr>
			    <td>登录账户</td>
			    <td>登录IP</td>
			    <td>登录城市</td>
			    <td>登录时间</td>
			  </tr>
			  </thead>
			  <tbody id="ipData">
			   <tr>
			    <td>admin</td>
			    <td>117.159.15.221</td>
			    <td>成都</td>
			    <td>2018-07-14</td>
			  </tr>
			   <tr>
			    <td>admin</td>
			    <td>117.159.15.221</td>
			    <td>成都</td>
			    <td>2018-07-14</td>
			  </tr>
			    <tr>
			    <td>admin</td>
			    <td>117.159.15.221</td>
			    <td>成都</td>
			    <td>2018-07-14</td>
			  </tr>
			  <tr>
			    <td>admin</td>
			    <td>117.159.15.221</td>
			    <td>成都</td>
			    <td>2018-07-14</td>
			  </tr>
			  </tbody>
			</table>
		</div>
	</div>
  
  <script src="media/js/jquery.min.js"></script>
  <script src="media/layui/layui.js"></script>
  <script src="media/js/jquery.cookie-1.4.1.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    function init() {
      $.ajax({
        url: "/emp/emp/getEmp",
        type: "POST",
        dataType: "json",
        data: {
          id: $.cookie('userId')
        },
        success: function(data) {
          getLoginLog(data.emp.no);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
          alert(XMLHttpRequest.status);
          alert(XMLHttpRequest.readyState);
          alert(textStatus);
        }
      });
      
      getEmpNum();
      getClassNum();
      getStudentNum();
    }
    init();
    
    function getEmpNum() {
      $.ajax({
        url: "/emp/emp/getEmpsList",
        type: "POST",
        dataType: "json",
        data: {
          page: 1,
          limit: 10
        },
        success: function(data) {
          $("#s2").text(data.count);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
          alert(XMLHttpRequest.status);
          alert(XMLHttpRequest.readyState);
          alert(textStatus);
        }
      });
    }
    
    function getClassNum() {
      $.ajax({
        url: "/emp/classes/getClassesList",
        type: "POST",
        dataType: "json",
        data: {
          page: 1,
          limit: 10
        },
        success: function(data) {
          $("#s3").text(data.count);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
          alert(XMLHttpRequest.status);
          alert(XMLHttpRequest.readyState);
          alert(textStatus);
        }
      });
    }
    
    function getStudentNum() {
      $.ajax({
        url: "/emp/student/getStudentsList",
        type: "POST",
        dataType: "json",
        data: {
          page: 1,
          limit: 10
        },
        success: function(data) {
          $("#s4").text(data.count);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
          alert(XMLHttpRequest.status);
          alert(XMLHttpRequest.readyState);
          alert(textStatus);
        }
      });
    }
    
    function getLoginLog(no) {
      $.ajax({
        url: "/emp/loginlog/getLoginlogByNo",
        type: "POST",
        dataType: "json",
        data: {
          no: no
        },
        success: function(data) {
          analyseData(data);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
          alert(XMLHttpRequest.status);
          alert(XMLHttpRequest.readyState);
          alert(textStatus);
        }
      });
    }
    
    function addTr(text) {
      return "<tr>" + text + "</tr>";
    }
    
    function addTd(text) {
      return "<td>" + text + "</td>";
    }
    
    function analyseData(data) {
      // console.log(data);
      var text = "";
      $.each(data.loginlogsList, function(i, loginlog) {
        var tds = "";
        
        var no = loginlog.no;
        var ip = loginlog.ip;
        var location = loginlog.location;
        var createtime = loginlog.createtime.split(" ")[0];
        
        tds += addTd(no);
        tds += addTd(ip);
        tds += addTd(location);
        tds += addTd(createtime);
        
        text += addTr(tds);
      });
      
      $('#ipData').empty();
      $('#ipData').append(text);
    }
  </script>
</body>

</html>